<style scoped>
	.role-context {
		padding: 10px;
		border: 1px solid #eee;
	}
	
	.role-header {
		width: 305px;
		height: 35px;
		background: #EEEEEE;
		border-right: 1px solid #eee;
	}
	
	.role-header span {
		line-height: 35px;
		margin-left: 10px;
		font-family: inherit;
		font-size: 14px;
		color: #1c2438;
		font-weight: 700;
	}
	
	.role-left-ul {
		padding: 2px;
		height: 700px;
		border: 1px solid #eee;
		width: 305 !important;
	}
	
	.role-list li {
		height: 30px;
		cursor: pointer;
	}
	
	.role-list li span {
		line-height: 30px;
		padding-left: 30px;
	}
	
	.role-context-save {
		background: #eee;
		height: 35px;
	}
	
	.role-context-save span {
		line-height: 35px;
	}
	
	.role-context-tree {
		padding: 15px;
		height: 700px;
		border: 1px solid #eee;
	}
	
	.role-context-tree.ivu-tree .ivu-tree-title {
		font-size: 14px;
	}
	
	.role-context-tree .ivu-tree .ivu-tree-arrow {
		font-size: 14px;
	}
</style>
<template>
	<div class="role-context">
		<Row>
			<Col span="4" style="width: 306px;">
			<div class="role-header">
				<Col span="8">
				<span>{{rolePageLabal[0].fcn}}</span>
				</Col>
				<Col span="12" offset="4" style="line-height: 35px;">
				<Button type="primary" size="small" @click="add">新增</Button>
				<Button type="primary" size="small" @click="upRole">修改</Button>
				<Button type="primary" size="small" @click="delModal = true">删除</Button>
				</Col>
			</div>
			<div class="role-left-ul">
				<ul class="role-list">
					<li v-for="(item, index) in rolList" @click="getMenu(item)">
						<span>
            		{{item.fname}}
            	</span>
					</li>
				</ul>
			</div>
			</Col>
			<Col span="19">
			<div class="role-context-save">
				<span>{{rolePageLabal[1].fcn}}</span>
				<Button type="primary" size="small">保存</Button>
			</div>
			<div class="role-context-tree">
				<Tree :data="baseData" show-checkbox></Tree>
			</div>
			</Col>
		</Row>
		<Modal v-model="addRoleModel" width="600">
			<p slot="header">
				<span>{{roleMogalLabal[0].fcn}}</span>
			</p>
			<div>
				<p>
					{{roleMogalLabal[1].fcn}}
					<Input style="width: 80%;" v-model="roleName"></Input>
				</p>
				<p>
					{{roleMogalLabal[2].fcn}}
					<Input-number v-model="rolesort"></Input-number>
				</p>
			</div>
			<div slot="footer">
				<Button   type="primary" @click="addRoleModel = false">取消</Button>
				<Button   type="primary" @click="insertUPdateRole">确认</Button>
			</div>
		</Modal>
		<Modal v-model="delModal" width="300" :mask-closable="false">
			<p slot="header" >
				<span>{{roleMogalLabal[3].fcn}}</span>
			</p>
			<div>
				<p style="text-align: center; font-size: 16px;">
					{{roleMogalLabal[4].fcn}}
				</p>
			</div>
			<div slot="footer">
				<Button   type="primary" @click="delModal = true">取消</Button>
				<Button   type="primary" @click="delRole">确认</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//rolelist
				rolList: [],
				roleId:'',
				roleType:'',
				roleName: "",
				rolesort: 1,
				addRoleModel: false,
				delModal:false,
				//roleMogalLabal
				roleMogalLabal: [{
					fcn: '新增角色'
				}, {
					fcn: '角色名称：'
				}, {
					fcn: '显示顺序：'
				}, {
					fcn: '删除人员：'
				}, {
					fcn: '您确定要删除吗？：'
				}
				],
				//rolePageLabal
				rolePageLabal: [{
					fcn: '角色管理'
				}, {
					fcn: '权限管理'
				}],
				baseData: [{
					expand: true,
					title: 'parent 1',
					children: [{
						title: 'parent 1-0',
						expand: true,
						children: [{
							title: 'leaf',
						}, {
							title: 'leaf',
						}]
					}, {
						title: 'parent 1-1',
						expand: true,
						checked: true,
						children: [{
							title: 'leaf',
						}]
					}]
				}],
			}
		},
		methods: {
			//角色列表
			getRoleList() {
				console.log(444)
				this.$http.get(this.url + 'role/selectall').then(response => {
					let isOk = response.data;
					//console.info (isOk.obj)
					if(isOk.success) {
						this.rolList = isOk.obj
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});
			},
			addRole() {
				this.addRoleModel = false;
			},
			upRole(){
					this.addRoleModel = true;
					this.roleMogalLabal[0].fcn="修改角色"
			},
			getMenu(param) {
				this.roleName=param.fname;
				this.roleId=param.fid ;
				this.roleType=param.ftype;
				this.$http.get(this.url + 'role/select/byfid/'+param.fid ).then(response => {
					let isOk = response.data;
					(isOk.obj)
					if(isOk.success) {
						//console.log(isOk)
						//
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});

			},
			insertUPdateRole(){
				if(this.roleMogalLabal[0].fcn =="新增角色"){
					this.addRole();
				}
				else{
					this.updateRole();
					this.addRoleModel = false;
					this.roleMogalLabal[0].fcn='新增角色';
					
				}
			},
			add(){
				this.addRoleModel = true ;
				this.roleName=''
				},
			addRole() {
				let role = {
					fname: this.roleName
				}
				this.$http.post(this.url + 'role/insert', role).then(response => {
					let isOk = response.data;
					if(isOk.success) {
						this.getRoleList();
						this.roleName="";
						this.addRoleModel = false;
					} else {
						this.$Message.error(isOk.msg);
					}
				}, response => {

				});
			},
			//修改角色
			updateRole(){
				let role = {
					fid:this.roleId,
					fname: this.roleName,
					ftype:this.roleType,
//					fsort
				}
				this.$http.post(this.url + 'role/update', role).then(response => {
					let isOk = response.data;
					if(isOk.success) {
						console.info(1212)
						this.getRoleList();
					} else {
						this.$Message.error(isOk.msg);
					}
				}, response => {

				});
			},
			delRole() {
				if(this.roleId == ''){
					this.$Message.info("请选择要删除角色");
					return;
				}
					let role = {
					fid:this.roleId,
					ftype:this.roleType,
					fstatue:1
				}
				this.$http.post(this.url + 'role/delete', role).then(response => {
					let isOk = response.data;
					if(isOk.success) {
						console.info(1212)
						this.getRoleList();
						this.delModal = false
						this.roleId="";
					} else {
						this.$Message.error(isOk.msg);
					}
				}, response => {

				});
				
			},
			getPowerList(){
				this.$http.get(this.url + 'sysMenu/select').then(response => {
					let isOk = response.data;
					if(isOk.success) {
						console.log(isOk.obj)
						this.getGoodsTreeList(isOk.obj)
					} else {
						this.$Message.error(isOk.msg);
					}
				}, response => {

				});
			},	//整理后台数据
			getGoodsTreeList: function(datas) {
				this.baseData = [];
				for(var i = 0; i < datas.length; i++) {
//					if(datas[i].fno == null) {
						this.baseData.push(this.getGoodsTreeChilds(datas, datas[i]));
//					}
				}
				console.log(this.baseData)
			},
			getGoodsTreeChilds: function(datas, data) {
				var obj = new Object;
				obj.title = data.fname;
				obj.fid = parseInt(data.fid);
				obj.fno = parseInt(data.fno);
				obj.children = [];
//				for(let i = 0; i < datas.length; i++) {
//					if(data.fid == datas[i].fno) {
//						obj.children.push(this.getGoodsTreeChilds(datas, datas[i]));
//					}
//				}
			
				return obj;

			},
		},

		mounted: function() {
			this.getRoleList()
			//this.getMenu()
			this.getPowerList();
		},
	}
</script>

<style>

</style>